<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Ares - 自定义占地生成器</title>
	<style  type="text/css">
		/* #################################### CSS #################################### */
		BODY {
			font-family: Verdana, sans-serif;
			margin: 0px;
			padding: 0px;
			color: #B3D45F;
			background-color: #4F6D00;
		}
		FORM INPUT {
			text-align: right;
		}
		H1 {
			margin-top: 0px;
			text-transform: uppercase;
		}
		P {
			margin-bottom: 0px;
		}
		INPUT[type="text"], TEXTAREA {
			background-color: #466100;
			border-top: 1px solid #344700;
			border-bottom: 1px solid #628700;
			border-left: 1px solid #344700; /*3d5400*/
			border-right: 1px solid #628700;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			padding: 2px;
			color: #ABF014;
		}
		INPUT[type="text"]:hover {
			background-color: #4F6D00;
			border: 1px solid #7AA800;
		}
		INPUT[type="text"]:focus {
			/* background-color: #4F6D00; */
			border: 1px solid #7AA800;
		}
		INPUT[type="submit"], INPUT[type="button"] {
			background-image: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%1E%08%02%00%00%00b%F7%E3%90%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%D9%09%1E%04%0E%0E%3A%01%0D%CF%00%00%00%25tEXtComment%00Created%20by%20Renegade%20with%20GIMP%A1-%04t%00%00%00MIDAT%08%D7-%C5%B1%11%840%00%03A%F9%ECZ(%97n%E8%EA%23%86%D0%92%08%F8%60gu%5E%07Ui%83T%DAR%05%B5%24%25.N%F0.v%F1.q%B0%CB%FD%FC%F0%16%89%88E%B6%B0%C5%18b%E8%FF%10H%CC)%E6%FA%AC%A5%17x%C739%803%AD%FD%00%00%00%00IEND%AEB%60%82");
			border-color: #aced00 #344700 #2b3b00 #a8e800;
			border-style: solid;
			border-width: 1px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			color: #253300;
			cursor: pointer;
		}
		/*INPUT[type="submit"]:hover, INPUT[type="button"]:hover {
			border-color: #aced00 #344700 #2b3b00 #a8e800;
		}*/
		INPUT[type="submit"]:active, INPUT[type="button"]:active {
			border-color: #2b3b00 #a8e800 #aced00 #344700;
			/* border-color: #aced00 #344700 #2b3b00 #a8e800; */
		}
		#width, #height {
			width: 5em;
		}
		#number_warning_x, #number_warning_y, #name_warning {
			font-weight: bold;
			font-size: large;
			/*color: #990000;*/
		}
		#number_warning_x EM, #number_warning_y EM, #name_warning EM {
			color: #EEEE00;
			font-style: normal;
		}
		#name_note {
			font-weight: bold;
			/* color: #880000; */
		}
		#warfac_note {
			font-size: small;
			width: 500px;
			margin-left: auto;
			margin-right: auto;
			text-align: justify;
		}
		INPUT[type="text"].inputwarn {
			border: 2px solid #DD0000;
		}
		#sidelabels {
			position: relative;
			top: 0px;
			left: 0px;
			margin-left: auto;
			margin-right: auto;
			padding: 3em;
			
			-moz-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			-moz-user-select: none;
		}
		#sidelabels #label_top {
			position: absolute;
			top: 0px;
			left: 0px;
		}
		#sidelabels #label_right {
			position: absolute;
			top: 0px;
			right: 0px;
		}
		#sidelabels #label_bottom {
			position: absolute;
			bottom: 0px;
			right: 0px;
		}
		#sidelabels #label_left {
			position: absolute;
			bottom: 0px;
			left: 0px;
		}
		#editor {
			text-align: center;
			border-collapse: collapse;
		}
		#editor TD {
			width: 40px;
			height: 40px;
		}
		#editor .editCell {
			border: 1px solid #2b3b00;
			cursor: pointer;
		}
		#editor .topCell {
			border-left: 1px solid #3d5400;
			border-right: 1px solid #3d5400;
			border-bottom: 1px solid #2b3b00;
		}
		#editor .leftCell {
			border-top: 1px solid #3d5400;
			border-right: 1px solid #2b3b00;
			border-bottom: 1px solid #3d5400;
		}
		#editor .outlineMargin {
			border: 1px solid #4c630f !important;
			background-color: #607e13;
			cursor: pointer;
		}
		#editor .selectedCell {
			border: 1px solid #008800 !important;
			background-color: #00AA00;
		}
		#editor .outlineCell {
			border: 1px solid #AA5500 !important;
			background-color: #FF9900;
		}
		#editor .bibCell {
			border: 1px solid #000088 !important;
			background-color: #0000AA;
		}
		#editor .editCell:hover, #editor .outlineMargin:hover {
			border: 1px solid #AA0000;
			background-color: #880000;
		}
		#controlbuttons {
			position: absolute;
			bottom: 6px;
			right: 10px;
		}
		#hint {
			position: absolute;
			top: 6px;
			right: 10px;
		}
		#hint EM {
			font-style: normal;
			font-family: "Courier New", monospace;
		}
		#code {
			height: 300px;
			width: 500px;
			font-family: "Courier New", monospace;
		}
		#layout_header {
			background-color: #7AA800;
			border-bottom: 1px solid #557500;
			height: 100px;
			font-size: xx-large;
			font-weight: bold;
			color: #c8ed6a;
		}
		#layout_header SPAN {
			position: absolute;
			top: 25px;
			left: 40px;
			text-shadow: 1px 1px 5px #557500;
		}
		#layout_params {
			background-color: #647E20;
			border-top: 1px solid #779626;
			border-bottom: 1px solid #4f6319;
			padding: 0.5em 0.5em 0.8em 2em;
			color: #c8ed6b;
			/* -moz-box-shadow: 0px 0px 50px 20px #557500; */
		}
		#layout_canvas {
			background-color: #4F6D00;
			border-top: 1px solid #5c8000;
			border-bottom: 1px solid #3d5400;
			padding: 10em 0px 10em 0px;
			
			position: relative;
			top: 0px;
			left: 0px;
		}
		#layout_code {
			background-color: #4F6D00;
			border-top: 1px solid #628700;
			text-align: center;
		}
		#layout_footer {
			margin-top: 5em;
			font-size: x-small;
			border-top: 1px solid #779626;
			text-align: center;
			padding: 0.2em;
			
			background-color: #647E20;
		}
	</style>
</head>
<body>
<!-- #################################### HTML #################################### -->
	<!-- Header -->
	<div id="layout_header">
		<span>Ares自定义占地生成器</span>
	</div>
	<!-- Base parameter block -->
	<div id="layout_params">
		<h1>占地</h1>
		<form id="widthheight" action="./">
			<p>
				<label for="name">建筑（art）名称</label>
				<input type="text" name="name_n" id="name" value="CATEMP">
			</p>
			<p>
				<label for="width">X / 宽:</label>
				<input type="text" name="width_n" id="width" value="5" maxlength="3">
				&nbsp;&nbsp;&nbsp;
				<label for="height">Y / 高:</label>
				<input type="text" name="height_n" id="height" value="5" maxlength="3">
				&nbsp;&nbsp;&nbsp;
				<input type="submit" name="set_params_n" id="set_params" value="设置基本参数">
			</p>
		</form>
		<!-- Warnings, these only pop up if there's stuff to complain about. -->
		<p id="number_warning_x" style="display: none;">警告！你的<em>宽</em>是<em>0 (zero)</em>或者<em>无法</em>被<em>识别</em>成数字！请检查你的输入！</p>
		<p id="number_warning_y" style="display: none;">警告！你的<em>高</em>是<em>0 (zero)</em>或者<em>无法</em>被<em>识别</em>成数字！请检查你的输入！</p>
		<p id="name_warning" style="display: none;">警告！你的建筑/art <em>ID</em> 是<em>空的</em>或者包含<em>空格</em>。请检查你的输入。</p>
		<p id="name_note" style="display: none;">注意：你的建筑/art名称长于8个字符。尽管仍能运行，但它不标准，也不推荐这样做</p>
	</div>
	
	<!-- The canvas to "draw" on -->
	<div id="layout_canvas">
		<div id="hint">用鼠标左键选中或反选，用<em>[Ctrl]</em>+左键放置轮廓格。</div>
		<!-- The corner labels are necessary for browsers who don't support rotation, and thus see the canvas 45° left -->
		<div id="sidelabels" style="display: none;">
			<div id="label_top">上 / 0</div>
			<div id="label_right">右 / X</div>
			<table id="editor"><tr><td>dummy data to silence validator</td></tr></table>
			<div id="label_bottom">下</div>
			<div id="label_left">左 / Y</div>
		</div>
		<!-- Outlines & clear buttons -->
		<div id="controlbuttons"><input type="button" name="outlnbtn_n" id="outlnbtn" value="生成轮廓">&nbsp;<input type="button" name="clearbtn_n" id="clearbtn" value="清空格子"></div>
	</div>
	<!-- Code text and .10 outline warning -->
	<div id="layout_code">
		<h1>代码</h1>
		<textarea id="code" readonly="readonly" cols="48" rows="16">请在上面输入名称、宽和高并点击“设置基本参数”。</textarea>
		<p id="warfac_note" style="display: none;"><strong>关于军工厂和轮廓的注意：</strong>在军工厂中游戏使用FoundationOutline.10作为初始的新产出单位出厂目的地，使用八个相邻的单元格作为替代目的地。而不管图形如何,这些单元格基本上构成了游戏所认为的工厂的“Bib”。<br>您看到此消息是因为您没有定义 FoundationOutline.10 - 如果您不是为军工厂设置占地，则可以忽略此注释。<br>您可以通过按住 Shift 键单击画布上的任意位置来手动设置 FoundationOutline.10。</p>
	</div>

	<div id="layout_footer">Renegade写于09年9月29日<br>Ghost114514翻译于22年5月28日</div>
	
	<!-- #################################### JAVASCRIPT #################################### -->
	<!-- <script type="text/javascript" src="http://www.google.com/jsapi"></script> -->
	<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
	<!-- <script type="text/javascript">
		google.load("jquery", "1");
		google.setOnLoadCallback(function() {
			// initialization
			$("#number_warning_x").hide();
			$("#number_warning_y").hide();
			$("#name_warning").hide();
			$("#name_note").hide();
			$("#warfac_note").hide();
			$("#sidelabels").hide();
			//$("#set_params").click(generateCanvas);
			$("#widthheight").submit(generateCanvas); // set event handler
			$("#widthheight").submit(); // trigger event to create default canvas
			$("#clearbtn").click(function() {updateCode(true);});
			$("#outlnbtn").click(generateOutline);
			$("#code").val("请在上面输入名称、宽和高并点击“设置基本参数”。"); // FF saves the value over refreshes, leaving old foundation data with empty canvases without this.
		});
	</script> -->
	
	<script type="text/javascript">
		function setup(evt) {
			// initialization
			$("#number_warning_x").hide();
			$("#number_warning_y").hide();
			$("#name_warning").hide();
			$("#name_note").hide();
			$("#warfac_note").hide();
			$("#sidelabels").hide();
			//$("#set_params").click(generateCanvas);
			$("#widthheight").submit(generateCanvas); // set event handler
			$("#widthheight").submit(); // trigger event to create default canvas
			$("#clearbtn").click(function() {updateCode(true);});
			$("#outlnbtn").click(generateOutline);
			$("#code").val("请在上面输入名称、宽和高并点击“设置基本参数”。"); // FF saves the value over refreshes, leaving old foundation data with empty canvases without this.
		}
	
		$(document).ready(setup);
	
		// When set, this stores the first three lines of the code: building name, width and height
		var baseParams = "Base parameters empty";
		
		// This function validates the name, width and height input parameters and returns true if they're in order.
		// If there's a problem, it unveils warnings and returns false.
		function validateInput() {
			var nameGood = true;
			var widthGood = true;
			var heightGood = true;
			
			// adds a notice if the name is longer than 8 chars...this has no effect on the validation, 
			// as that's mostly a matter of adhering to tradition
			($("#name").val().length > 8) ? $("#name_note").show("slow") : $("#name_note").hide("normal");
			
			// tests whether the width is not a number or zero or negative
			if((isNaN(parseInt($("#width").val()))) || (parseInt($("#width").val()) <= 0)) {
				$("#number_warning_x").show("fast");
				$("#width").addClass("inputwarn");
				widthGood = false;
			} else {
				$("#number_warning_x").hide("normal");
				$("#width").removeClass("inputwarn");
			}
			
			// tests whether the height is not a number or zero or negative
			if((isNaN(parseInt($("#height").val()))) || (parseInt($("#height").val()) <= 0)) {
				$("#number_warning_y").show("fast");
				$("#height").addClass("inputwarn");
				heightGood = false;
			} else {
				$("#number_warning_y").hide("normal");
				$("#height").removeClass("inputwarn");
			}
			
			// tests whether the name is empty or contains whitespace (the latter would technically be legal, but is just poor form)
			if(($("#name").val().length <= 0) || /\s+/.test($("#name").val())) {
				$("#name_warning").show("fast");
				$("#name").addClass("inputwarn");
				nameGood = false;
			} else {
				$("#name_warning").hide("normal");
				$("#name").removeClass("inputwarn");
			}
			
			return widthGood && heightGood && nameGood;
		}
		
		// This function updates the code box at the bottom with Ares-compliant INI code to generate the foundation the user drew ingame.
		// As a special case, if the function is passed any value that could be interpreted as "true", e.g. a literal true, a true boolean 
		// or positive integer, it will instead clear all cells and reset the code box.
		function updateCode(clear) {
			var foundationCellsString = "";
			var outlineCellsString = "";
			var bibCell = ($(".bibCell").length > 0) ? getCellCoords($(".bibCell")[0]) : false; // abusing weakly typed languages 101  // contains .x and .y coords
			
			// special case: clear all
			if(clear) {
				$(".selectedCell").removeClass("selectedCell");
				$(".outlineCell").removeClass("outlineCell");
				$(".bibCell").removeClass("bibCell");
				$("#code").val(baseParams);
				return;
			}
			
			// Vastly improved algorithm only checks cells that are actually selected
			// foundation cells
			var selectedCells = $(".selectedCell");
			for(var i = 0; i < selectedCells.length; ++i) {
				var tempCoords = getCellCoords(selectedCells[i]);
				foundationCellsString += "\nFoundation." + i + " = " + (tempCoords.x - 2) + "," + (tempCoords.y - 2);
			}
			// outline incl. bib cell 
			var outlineCells = $(".outlineCell");
			if(bibCell && (outlineCells.length >= 11)) { // if we have a designated bib cell and there will be someone else occupying 10, we have to switch their places
				var previous10 = getCellCoords(outlineCells[10]); // this way, we can happily override the old 10
			}
			if(bibCell && (outlineCells.length < 11)) { // same basic idea, but since there is no 10 this time, we have to save the empty spot until we know which one to put there
				var bibWas = -1; // which i/number in the list was the bib?
			}
			for(var i = 0; i < outlineCells.length; ++i) {
				var tempCoords = getCellCoords(outlineCells[i]);
				//console.debug("ID: %i; tempcoords: %i, %i; bibcell: %i,%i", i, tempCoords.x, tempCoords.y, bibCell.x, bibCell.y);
				// if it wasn't for the bib handling, this part would be two lines long - the first and the last x_x
				if(bibCell) { // if a bib cell is defined ...
					if(i === 10) { // ...and it is bib time, apply it
						tempCoords = bibCell;
					} else if((tempCoords.x === bibCell.x) && (tempCoords.y === bibCell.y)) { // if it's not, see if this is the original spot of the bib
						if(outlineCells.length >= 11) {
							tempCoords = previous10; // if this is where the bib originally was, place the coords from [10] here instead
						} else { // if we don't get a [10] item in the list, just place the bib at place .10 (D said this'd work)
							outlineCellsString += "\nFoundationOutline.10 = " + (bibCell.x - 2) + "," + (bibCell.y - 2);
							bibWas = i; // memorize for which spot we did this, so we can fill it up later
							continue; 
						}
					}
				}
				if((bibWas >= 0) && (i === (outlineCells.length - 1))) { // if the bib was moved elsewhere, and this is the last loop, fill the gap
					outlineCellsString += "\nFoundationOutline." + bibWas + " = " + (tempCoords.x - 2) + "," + (tempCoords.y - 2);
					continue;
					// we could do all sorts of magic to bring the list in order, but it makes no difference in parsing anyway *shrug*
				}
				
				// save the individual lines of code
				outlineCellsString += "\nFoundationOutline." + i + " = " + (tempCoords.x - 2) + "," + (tempCoords.y - 2);
			}
			if(outlineCells.length) {	// if there are outlines, output them
				$("#code").val(baseParams + foundationCellsString + "\nFoundationOutline.Length = " + outlineCells.length + outlineCellsString);
				if((outlineCells.length < 11) && !bibCell){ //if there are outlines defined, but no natural .10, and no special bib cell has been set ...
					$("#warfac_note").show("normal"); // ... give a warning about WarFacs.
				} else {
					$("#warfac_note").hide("normal");
				}
			} else { // if there are no outlines, just give us the foundation
				$("#code").val(baseParams + foundationCellsString);
			}
		}
		
		// this is the click handler for selecting/painting on the canvas
		function cellSelected(event) {
			// ctrl+click -> add cell to outline
			// shift+click -> set outline .10 (bib center)
			// normal click -> add cell to selection
			if(event.shiftKey) {								// bib cell handling
				if($(this).hasClass("bibCell")) {
					$(this).removeClass("bibCell");
				} else {
					if($(".bibCell").length) { // if there was already a bib cell defined, kill the previous one
						$(".bibCell").removeClass("bibCell");
					}
					$(this).addClass("outlineCell"); // need this since the bib is ultimately just a special case outline
					$(this).addClass("bibCell");
				}
			} else if($(this).hasClass("outlineMargin")) {		// outline margin cell handling
				if($(this).hasClass("outlineCell")) { // foundation handling is irrelevant here 'cause only outlines can be on the margin
					$(this).removeClass("outlineCell");
				} else {
					$(this).addClass("outlineCell");
				}
			} else {
				if(!event.ctrlKey) {							// foundation cell handling
					if($(this).hasClass("selectedCell")) {
						$(this).removeClass("selectedCell");
					} else {
						$(this).addClass("selectedCell");
					}
				} else {										// outline cell handling
					if($(this).hasClass("outlineCell")) {
						$(this).removeClass("outlineCell");
					} else {
						$(this).addClass("outlineCell");
					}
				}
			}
			
			// now that we finally worked out what has changed, time to update the code
			updateCode();
		}
	
		/*  this function generates the "canvas" foundations will be painted on
			column and row 0 are the labels
			column and row 1 are margins for outlines only
			the last column and row each form the other two sides of the margin
			
			ultimatel layout is like this:
			  LLL
			 MMMMM
			LMCCCM
			LMCCCM
			LMCCCM
			 MMMMM
			where L = label, M = margin, C = canvas
		*/
		function generateCanvas(event) {
			// D asked for this to work with [enter] as well, so I had to use submit; this kills the standard submit
			event.preventDefault();
			
			// this entire thing won't run if the base params aren't valid. there's nothing after this if.
			if(validateInput()) {
				// Build the code representation of the base parameters
				var generatedCode = "Internal Error: If you see this, code _should_ have been generated, but something went wrong in the process.";
				
				var buildingName = $("#name").val();
				var foundWidth = parseInt($("#width").val());
				var foundHeight = parseInt($("#height").val());
				
				generatedCode = "[" + buildingName + "]\nFoundation = Custom\nFoundation.X = " + foundWidth + "\nFoundation.Y = " + foundHeight;
				
				// output the base params in the code box and save them globally
				$("#code").val(generatedCode);
				baseParams = generatedCode;
				
				// Draw the actual canvas
				$("#editor").empty();
				$("#sidelabels").width("100%");
				/* generates width + 2 margins + 1 label columns and
				   generates height + 2 margins + 1 label rows
				   
				   classes:
					editCell: clickable cells forming the paintable canvas
					topCell: X-axis labels
					leftCell: Y-axis labels
					outlineMargin: only clickable/paintable for outlines
				*/
				var canvasYheight = foundHeight + 3; //canvas + 2 outline + 1 labels
				var canvasXwidth = foundWidth + 3;
				for(var yRows = 0; yRows <= canvasYheight; ++yRows) {
					var tempRow = document.createElement("tr");
					for(var xCols = 0; xCols <= canvasXwidth; ++xCols) {
						var tempCol = document.createElement("td");
						// if this cell is neither a label nor in the outline margin, make it editable
						if((yRows > 1) && (xCols > 1) && (yRows < (canvasYheight - 1)) && (xCols < (canvasXwidth - 1))) $(tempCol).addClass("editCell");
						
						// build the label row
						if((yRows === 0) && (xCols > 1) && (xCols < (canvasXwidth - 1))) {
							$(tempCol).text((xCols - 2)).addClass("topCell");
						}
						// build the label column
						if((xCols === 0) && (yRows > 1) && (yRows < (canvasYheight - 1))) {
							$(tempCol).text((yRows - 2)).addClass("leftCell");
						}
						
						// draw the outline margin (surrounds the canvas)
						if(((xCols > 0) && (xCols < canvasXwidth) && ((yRows === 1) || (yRows === (canvasYheight - 1))))
							|| ((yRows > 0) && (yRows < canvasYheight) && ((xCols === 1) || (xCols === (canvasXwidth - 1)))))$(tempCol).addClass("outlineMargin").attr("title","Margin, for outlines only.");
						tempRow.appendChild(tempCol);
					}
					// add the whole thing to the canvas/table
					$("#editor")[0].appendChild(tempRow);
				}
				// make the div with the directional labels for the corners visible and reset the container's width to match the editor
				$("#sidelabels").show("slow", function() {
					$("#sidelabels").width($("#editor").width());
				});
				
				// Make the cells clickable
				$("#editor .editCell").click(cellSelected);
				$("#editor .outlineMargin").click(cellSelected);
			}
		}
		
		// checks all eight surrounding cells of every cell on the canvas and turns them into outlines if they're empty (individually)
		// thus auto-generating an outline for the foundation
		function generateOutline() {
			// get foundation cells
			var selectedCells = $(".selectedCell");
			
			// if you change this, change the 8 in the for-j below
			// there should be no reason to change it, though
			// (these are the locations/directions of the other cells in relation to the current one)
			var vectors = [{x: -1,y: -1},{x: 0,y: -1},{x: 1,y: -1},{x: -1,y: 0},{x: 1,y: 0},{x: -1,y: 1},{x: 0,y: 1},{x: 1,y: 1}];
			
			for(var i = 0; i < selectedCells.length; ++i) {
				var tempCoords = getCellCoords(selectedCells[i]);
				// go through all eight adjacent cells and check if they need outlining.
				// if so, add outline
				for(var j = 0; j < 8; ++j) {
					var adjacentCell = getCell(tempCoords.x + vectors[j].x,tempCoords.y + vectors[j].y);
					//console.debug("i: %i, j: %i, tempX: %i, tempY: %i, vectorX: %i, vectorY: %i", i, j, tempCoords.x, tempCoords.y, vectors[j].x, vectors[j].y);
					if(!adjacentCell.hasClass("selectedCell")) {
						adjacentCell.addClass("outlineCell");
					}
				}
			}
			// as usual, update the actually displayed code
			updateCode();
		}
		
		// helper function to de-clutter and make access more intuitive
		function getCell(column, row) {
			return $($("#editor")[0].rows[row].cells[column]);
		}
		
		// returns an object with .x and .y members denoting the cell column and row in #editor
		// based on actual table coordinates, though - that is, 0,0 is the top left corner of the label column and row
		function getCellCoords(cell) {
			return {x: parseInt($(cell).attr("cellIndex")), y: parseInt($(cell).parent().attr("rowIndex"))};
		}
		
	</script>

</body>
</html>